<script setup>
import { ref } from 'vue';
import HeadMenu from './components/HeadMenu.vue';
import RegisterWordPage from './components/RegisterWordPage.vue';
import ReciteWordPage from './components/ReciteWordPage.vue';
import ManageWordPage from './components/ManageWordPage.vue';

// const showPageIndex = ref(["","display: none;","display: none;"]);
const showPageIndex = ref(0);


function highlightPage(pageIndex){
  showPageIndex.value = pageIndex;
}



</script>
<!-- 在HTML头部添加视口设置 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<template>
  <header>
  </header>

  <main>
    <div class="wrapper">
      <HeadMenu class="headmenu" :hrefNames="['登记单词','背诵单词','管理单词']" @hilight-page-index="highlightPage">
      </HeadMenu>
      <div class="mainpage">
        <RegisterWordPage v-if="showPageIndex == 0">

        </RegisterWordPage >
        <ReciteWordPage v-if="showPageIndex == 1">

        </ReciteWordPage>
        <ManageWordPage v-if="showPageIndex == 2">

        </ManageWordPage>

        <!-- <DatePickerTreeSelector v-if="showPageIndex == 3" :date-infos="dateInfos" @selected-days="dealSelectedDays">

        </DatePickerTreeSelector> -->

      </div>
      
    </div>
    

  </main>

  <footer>

  </footer>
</template>

<style scoped>

.wrapper {
  text-align: center;
}

.headmenu {
  display: inline-block;
  width: 100%;
  margin-bottom: 1.5%;
  
}
.mainpage {
  display: inline-block;
  width: 100%;
}
</style>
